/*
 * @Author: yangzonglong
 * @Date: 2021-07-20 10:43:14
 * @version: v1.0.0
 * @Descripttion: mobile text
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-26 14:47:25
 * @Auditor:
 */
import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { textReplaceStr } from '../../util';

const divStyle = {
  width: '100%',
  marginBottom: 0
};

const pStyle = {
  margin: 0,
  marginBottom: 0,
  width: '100%',
  padding: '8px',
  outline: 'none',
  border: 'none',
  "white-space": "pre-wrap",
  "page-break-after": 'inherit',
  paddingLeft: 0,
  paddingRight: 0
};

const preStyle = {
  marginBottom: 0
};

const PrintText = ({ textProps, style, transferData, id, initialValue }) => {
  const textRef = useRef(null);
  const [isParentTd, setIsParentTd] = useState(false);
  const str = textReplaceStr(localStorage.i18nextLng === 'en' ? textProps?.textEn : textProps?.text, transferData);

  useEffect(() => {
    const box = document.getElementById(id);
    if (box.parentNode.tagName.toUpperCase() === 'TD') {
      setIsParentTd(true);
    }
  }, [id]);

  return (
    <div style={divStyle} id={id}>
      {isParentTd ? (
        textProps.clearFormat ? (
          <div style={{ ...style, ...preStyle }}>{initialValue || str}</div>
        ) : (
          <pre
            style={{ ...style, ...preStyle }}
            dangerouslySetInnerHTML={{ __html: initialValue || str }} />
        )
      ) : (
        textProps.clearFormat ? (
          <div style={{ ...style, ...preStyle }}>{initialValue || str}</div>
        ) : (
          <pre
            style={{ ...style, ...pStyle, resize: 'none' }}
            ref={textRef}
            dangerouslySetInnerHTML={{ __html: initialValue || str }}
          />
        )
      )}
    </div>
  );
};

export default forwardRef(PrintText);
